<template>
  <div class="home-container">
    <!-- 侧边栏：菜单 -->
    <div class="side-bar-wrap left-part">
      <!-- default-active:作为当前激活的菜单 -->
      <el-menu class="menu" :collapse="isCollapse" :default-active="activeMenu">
        <template v-for="item in menuList">
          <el-menu-item v-if="!item.children || item.children.length===0" @click="choseMenu(item)" :index="item.path">
            <i :class="item.icon"></i>
            <span slot="title">{{item.meta.title}}</span>
          </el-menu-item>
          <el-submenu v-else :index="item.path">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{item.meta.title}}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.path" @click="choseMenu(child)" :index="child.path">{{child.meta.title}}</el-menu-item>
          </el-submenu>
        </template>
      </el-menu>
    </div>

    <div class="flex-column flex-1 right-part">
      <!-- 顶部栏：导航 -->
      <div class="nav-bar-wrap">
        <div class="collapse">
          <i @click="collapse" class="collapse-icon" :class="{'el-icon-s-fold': isCollapse, 'el-icon-s-unfold': !isCollapse}"></i>
        </div>
        <div class="user">
          <el-dropdown>
            <span class="el-dropdown-link">
              <el-avatar size="small" src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"></el-avatar>
            </span>
            <el-dropdown-menu slot="dropdown" class="dropdown">
              <el-button type="text" @click="logout">退出登录</el-button>>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <!-- tab页签 -->
      <div class="tab">
        <el-tabs v-model="currentTab" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
          <el-tab-pane v-for="(item, index) in tabs" :key="item.path" :label="item.meta.title" :name="item.path">

          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 内容：菜单切换内容 -->
      <div class="flex-1 overflow-hidden">
        <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script>
  import '../../mock/config';
  import { logoutAndClear } from "../../utils/globalUtil";

  export default {
    name: "home",
    data() {
      return {
        menuList: [],
        isCollapse: false,
        activeMenu: '',
        tabs: [],
        tabMap: {},
        currentTab: ''
      }
    },
    methods: {
      collapse() {
        this.isCollapse = !this.isCollapse;
      },
      logout() {
        logoutAndClear();
        this.$router.push('/login')
      },
      async initMenu() {
        const res = await this.$http.get('/getMenu', {
          params: { role: 'admin' }
        });
        this.menuList = res;
        this.choseMenu(this.$route, 'init')
      },
      choseMenu(item, type) {
        if (this.$route.path === item.path && !type) return; // 处理重复点击相同路径导致vue-router报错问题
        !type && this.$router.push(item.path); // 跳转
        this.activeMenu = this.currentTab = item.path; // 记录当前激活菜单和tab
        if (!this.tabMap[item.path]) { // 将菜单录入到tab数据中，tabs用于展示处理，tabMap用于匹配
          this.tabs.push(item);
          this.tabMap[item.path] = item;
        }
      },
      removeTab(name) {
        if (this.tabs.length<=1) {
          return this.$message.info('当前仅剩一个菜单，无法删除');
        }

        let index = this.tabs.findIndex(item => item.path === name); // 获取当前要删除的tab在tabs中的下标
        this.tabs.splice(index, 1); // 删除tabs记录
        delete this.tabMap[name]; // 删除tabMap记录
        if (name === this.activeMenu) { // 如果删除的是当前激活中的菜单，那么点击删除后当前激活菜单改为向前一位
          if (index-1>=0) {
            this.choseMenu(this.tabs[index-1])
          } else {
            this.choseMenu(this.tabs[index])
          }
        }
      },
      clickTab(tab) {
        this.choseMenu(this.tabMap[tab.name])
      }
    },
    created() {
      this.initMenu()
    }
  }
</script>

<style scoped lang="scss">
  .home-container{
    height: 100vh;
    display: flex;
    .side-bar-wrap{
      height: 100%;
      .menu{
        text-align: left;
        height: 100%;
      }
      .menu:not(.el-menu--collapse){
        width: 200px;
        height: 100%;
      }
    }
    .nav-bar-wrap{
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 60px;
      border-bottom: solid 1px #e6e6e6;
      .collapse-icon{
        font-size: 24px;
        color: #909399;
        cursor: pointer;
      }
      .user{
        .el-icon-user-solid{
          font-size: 24px;
          cursor: pointer;
        }
      }
    }
  }
  .dropdown{
    padding: 12px;
  }
</style>
